<template>
  <div class="container" style="padding-bottom: 3rem">
    <van-sticky :offset-top="0">
      <van-nav-bar
        left-text="返回"
        title="商品详情"
        left-arrow
        @click-left="back"
      />
    </van-sticky>
    <h3 style="margin-top: 0.6rem; text-align: center">{{ product.name }}</h3>
    <div v-html="product.content"></div>
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="toHome" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon
        icon="shop-o"
        text="评论"
        :to="{ name: 'Comment', params: { id: product.id } }"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { loadProductsDetail } from "../services/products";
import { Toast } from "vant";
import { addToCart } from "../services/cart";
import { isLogined } from "../utils/tools";
Toast.setDefaultOptions({ duration: 500 });
export default {
  data() {
    return {
      product: {},
    };
  },
  async created() {
    const res = await loadProductsDetail(this.$route.query.id);
    this.product = res.data;
  },
  methods: {
    onClickIcon() {
      this.$router.push({
        name: "Cart",
      });
    },
    async onClickButton() {
      if (isLogined()) {
        await addToCart(this.product.id, 1);
        Toast.success("加入购物车成功");
        this.$router.push({
          name: "Cart",
        });
      }
      else{
       Toast.loading({
  message: '先登录一下吧...',
  forbidClick: true,
  loadingType: 'spinner',
});
this.$router.push({
  name: "Login",
})
      }
    },
    toHome() {
      this.$router.push({
        name: "Home",
      });
    },
    back() {
      window.history.go(-1);
    },
  },
};
</script>

<style>
</style>
